<template>
    <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="gobackFn">
        <template #right>
            <div v-if="!isshowloginout">
                <van-popover placement="bottom-end" v-model="showPopover" theme="dark" trigger="click" :actions="actions"
                    @select="onSelect">
                    <template #reference>
                        <van-icon name="ellipsis" v-show="isshowright" />
                    </template>
                </van-popover>
                <!-- 显示面板分享 -->
                <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
            </div>
            <div v-else @click="loginoutFn" style="color:#1989fa">
                退出
            </div>

        </template>
    </van-nav-bar>
</template>

<script>
// 使用辅助函数映射方式将vuex种的mutation 方法映射到当前组件this实例上
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            showPopover: false,
            showShare: false, // 是否显示面板分享
            actions: [
                { text: '首页' },
                { text: '购物车' },
                { text: '分享' }],
            options: [  // 分享的面板内容
                [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                ],
                [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                ],
            ],
        }
    },
    //props: ['title', 'isshowright'],
    props: {
        title: {
            type: String, //类型是字符串
            required: true // 必需要传递
        },
        isshowright: {
            type: Boolean, // 数据类型
            default: true,// 默认值
        },
        isshowloginout: {
            type: Boolean,// 数据类型
            default: false,// 默认值
        }

    },
    methods: {
        ...mapMutations(['updateUser']),
        gobackFn() {
            // 返回上一页
            this.$router.go(-1)
        },
        onSelect(action) {
            console.log(action);
            if (action.text == '分享') {
                this.showShare = true
            }
        },
        // 退出登录功能
        loginoutFn() {
            // 01: 提示是否要退出登录
            this.$dialog.confirm({
                title: '提示',
                message: '是否要退出登录?',
            }).then(() => {
                // 02: 清除登录时的一些痕迹
                localStorage.removeItem('token');
                // 重置vuex 中的userid 为''
                this.updateUser('');
                localStorage.removeItem('vuex');
                // 03: 路由跳转到首页
                this.$router.push('/home')
            }).catch(() => {
                // on cancel
            });



        }
    }
}
</script>
<style lang="less" scoped>
/deep/ .van-icon-ellipsis {
    font-size: 24px;
    font-weight: 800;
}
</style>